<template>
	<view>
		<view class="z" v-if="alumnus.length!=0">
			<view class="xqin" v-for="(alumnu, index) in alumnus" >
				<!-- <navigator url="own_infor?id="+{{alumnu.id}}+'&headImg='+{{alumnu.headImg}}> -->
						<view class="tr" @click="toStuAndTea(alumnu.type,alumnu.id)">
							<image class="ima" :src="getHeadImg(alumnu.headImg)"
								style="width: 110rpx;height: 110rpx;border-radius: 50%;"></image>
							<view class="mz">{{alumnu.name}}</view>
						</view>
						<view class="zy">{{alumnu.depart}}</view>
				<!-- </navigator> -->
			</view>	
			<!-- <view v-if="flag==false">到底了~</view> -->
		</view>
		<view v-if="alumnus.length==0">
			没有找到这个人！
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',/*, 搜索内容 */
				alumnus:[], /* 校友*/
				id:'',
				flag:'true',
				page:0,
				size:10
			}
		},
		onLoad(option){
			this.content=option.content;
			var that = this;
			uni.request({
				 url:getApp().globalData.URL+'associationUserInfo/uniapp',
				 data:{
					 name:that.content,
					 page:that.page,
					 size:that.size,
				 },
				 header: {
				     'content-type': 'application/json;charset=UTF-8' // 默认值
				   },
				success:res =>{
					that.alumnus = res.data;
					}
			})
		},
		onReachBottom:function(){				//当划到最底部的时候触发事件
				console.log("我是最底部了");
				if(this.flag=='true'){
					this.getMoreNews();
				}else{
					uni.showToast({
						title: '到底啦~',
						icon: 'none'
					});
				}
								
				},
		methods: {
			//判断属于教师还是学生
			toStuAndTea(typeId,userId){
				this.id=userId;
				if(parseInt(typeId)==0){
					uni.navigateTo({
						// url:'own_inforteacher?id='+this.id
						url:'own_inforteacher?id='+this.id
					})
				}else{
					uni.navigateTo({
						url:'own_inforstudent?id='+this.id
					})
				}
			},
			
			getMoreNews:function(){						//数据到底,触发这个函数
				this.page = this.page + 1;
				uni.showNavigationBarLoading();		//一读取数据,就进行刷新
				var that = this;
				uni.request({
					url:getApp().globalData.URL+'associationUserInfo/uniapp',
					data:{
						 name:that.content,
						 page:that.page,
						 size:that.size,
					},
					header: {
						 'content-type': 'application/json;charset=UTF-8' // 默认值
					   },
					success:res =>{
						// console.log("后台传来的",res.data);
						// that.alumnus = res.data;
						if(res.data.length==0){
							that.flag = 'false';
							that.page = that.page - 1;
							return false;
						}
						that.alumnus=that.alumnus.concat(Array.from(res.data)); //拼接数组
						// uni.stopPullDownRefresh();	//数据加载完成,刷新结束
						// uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止	
					},
				})
			},
			getHeadImg(head_img){
				if(head_img == null || head_img == ''){
					return getApp().globalData.Link+'upload/图片/xiaohui.png';
				}else{
					return getApp().globalData.Link+'upload/图片/'+head_img;
				}
				
			}
			
		}
	}
</script>

<style>
	.header-input {
	    margin-left: 28rpx;
	    margin-top: 20rpx;
	    width: 694rpx;
	    height: 66rpx;
	    border-radius: 36rpx;
	    background-color: rgba(245,245,245,0.9);
	    border: 1rpx solid #dfdfdf;
	    display: flex;
	    flex-direction: row;
	}
	.header-input input {
	    margin-left: 31rpx;
	    width: 564rpx;
	    height: 66rpx;
	    line-height: 66rpx;
	    border-right: 1rpx solid #dfdfdf;
	    font-size: 28rpx;
	}
	
	.header-input view {
	    width: 96rpx;
	    height: 66rpx;
	}
	.image {
	    margin-left: 20rpx;
	    margin-top: 11rpx;
	    width: 44rpx;
	    height: 44rpx;
	}
	.ima{
			margin-top: 20rpx;
			margin-left: 15rpx;
		}
	.im{
	
		
	}
	.xm{
		font-size: 35rpx;
		margin-top: 30rpx;
		align-items: center;
		margin-left: 14rpx;
	}
	.xmwz{
		margin-left:155rpx ;
		font-size: 24rpx;
		margin-top: -60rpx;
		color: #999999;
	}
	
		.xqin{
		
			width: 100%;
			height: 150rpx;
			font-size: 28rpx;
			margin-top: 10rpx;
			align-items: center;
			
			border-bottom: 1rpx solid #BBBBBB;
			
		}
		.mz{
			font-size: 35rpx;
			margin-top: 50rpx;
			align-items: center;
			margin-left: 35rpx;
			
		}
		.zy{
			margin-left:155rpx ;
			font-size: 24rpx;
			margin-top: -35rpx;
			color: #999999;
		}
	.tr{
		display: flex;
	}
	.z{
		margin-top:20rpx;
		border-top: 1rpx solid #BBBBBB;
	}
	.one{
		width: 100%;
		height: 110rpx;
		font-size: 35rpx;
		margin-top: 50rpx;
		align-items: center;
		
		border-bottom: 1rpx solid #C0C0C0;
	}
	#tx{
		margin-left: 50rpx;
	}
	#count{
		margin-left:20rpx ;
		font-size: 24rpx;
		color: #999999;
	}
</style>
